<template>
	<view>
		<view class='zctab-bar-box'>
			<tab-bar style="width: 100%;" class="uni-flex zcJustifyC_center" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
			
			<view class="uni-tab-bar">
				<view :current="tabBar.tabIndex" @change="changeTab">
					<block v-for="(item,index) in tabBar.tabBars" :key='index'>
						<view class="zc-tab-bar" v-show="index === tabBar.tabIndex">
							<homeCountList :targetList1='targetList1' :targetList2='targetList2' ></homeCountList>
							
							<view v-if="opts2.series[0].data.length>0">
								<view class='uChartWrap'>
									<view class="">{{item.name}}</view>
									<u-charts :canvasId="item.canvasId" class='uChart' :chartType="opts2.chartType" :opts="opts2"></u-charts> 
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	import homeCountList from '../../components/home-count-list/home-count-list.vue'
	import uCharts from "../../components/u-charts/u-charts.vue"
	
	let _this;
	export default {
		components:{
			tabBar,
			uCharts,
			homeCountList
		},
		data() {
			return {
				year:'',
				month:'',
				tabBar:{
					tabIndex:0,
					tabBars:[
						{name:'续保',canvasId:'xb_Charts'},
						{name:'新增',canvasId:'xz_Charts'},
						{name:'售后',canvasId:'sh_Charts'},
						{name:'交叉',canvasId:'jc_Charts'},
						{name:'其他',canvasId:'qt_Charts'},
					]
				},
				targetList1:[  //目标数据
					{name:'总线索',icon:'icons-',numb:0},
					{name:'总成功',icon:'zhengque',numb:0},
					{name:'总失败',icon:'shibai1',numb:0},
					{name:'总跟进',icon:'shijian',numb:0},
				],
				targetList2:[  //目标数据
					{name:'当月线索',icon:'icons-',numb:0},
					{name:'当月成功',icon:'zhengque',numb:0},
					{name:'当月失败',icon:'shibai1',numb:0},
					{name:'当月跟进',icon:'shijian',numb:0},
				],
				opts2:{
					chartType:'column',	// 参数为 column（柱状图） 、 line（折线图）
					categories: [],
					series: [{
						name: '成功',
						data: [],
						color: '#97a5e8'
					}, {
						name: '失败',
						color: '#3ca5fb',
						data: []
					}, {
						name: '跟进',
						color: '#9270da',
						data: []
					}, {
						name: '总线索',
						color: '#bdab62',
						data: []
					}]
				},
				allInfo:[]
			}
		},
		onLoad(){
			_this = this;
			let date = new Date();
			date = date.toJSON().split('T')[0];
			_this.year = date.split('-')[0];
			_this.month = date.split('-')[1];
			
			_this.zcQuerySalesMan4SaleChanceStatistic('续保');
		},
		methods: {
			tapTab(e){
				this.tabBar.tabIndex=e
				
				let type = _this.tabBar.tabBars[e].name;
				if (e === 2) {
					type = '售后线索';
				}else if (e === 4) {
					type = '其他服务';
				}
				_this.zcQuerySalesMan4SaleChanceStatistic(type);
			},
			zcQuerySalesMan4SaleChanceStatistic(type) {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QuerySalesMan4SaleChanceStatistic',
						Data: {
							Calendar_Year: _this.year,	
							Calendar_Month: _this.month,
							SaleChanceCategory: type
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data!==null) {
								_this.targetList1[0].numb = resjson.data.ChanceTotalCount;	//总线索
								_this.targetList1[1].numb = resjson.data.ChanceTotalSuccessCount;	//总成功
								_this.targetList1[2].numb = resjson.data.ChanceTotalFailedCount;	//总失败
								_this.targetList1[3].numb = resjson.data.ChanceTotalTracingCount;	//总跟进
								
								_this.targetList2[0].numb = resjson.data.MonthChanceTotalCount;	//当月线索
								_this.targetList2[1].numb = resjson.data.MonthChanceTotalSuccessCount;	//当月成功
								_this.targetList2[2].numb = resjson.data.MonthChanceTotalFailedCount;	//当月失败
								_this.targetList2[3].numb = resjson.data.MonthChanceTotalTracingCount;	//当月跟进
								
								_this.opts2.categories = [];
								if (resjson.data.ChanceMonth != null && resjson.data.ChanceMonth.length > 0) {
									for (let i = (resjson.data.ChanceMonth.length-5); i < resjson.data.ChanceMonth.length; i++) {
										_this.opts2.categories.push(resjson.data.ChanceMonth[i]); 
									}
								}
								
								
								if (resjson.data.ChanceData != null && resjson.data.ChanceData.length > 0) {
									for (let i = 0; i < resjson.data.ChanceData.length; i++) {	//	图形 数据
										_this.opts2.series[i].data = [];
										for (let k = (resjson.data.ChanceData[i].length-5); k < resjson.data.ChanceData[i].length; k++) {
											_this.opts2.series[i].data.push(resjson.data.ChanceData[i][k]) ;
										}
									}
								}
								
							}
							
						} else{
							
						}
						
					},
					Scope: this
				})
			}
		}
	}
</script>

<style>
		.zctab-bar-box{
		width: 100%;
		/* height: 940upx; */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
		.uni-tab-bar{
		width: 100%;
		flex: 1;
		height: 100%;
		position: relative;
	}
		.zc-tab-bar{
		overflow: hidden;
		display: block;
		will-change:transform;
		transition: all 0.4S ease-in;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;}
	.swiper-tab-list{width: 20%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;}
	.uni-tab-bar .active:after{content: '';position: absolute;width: 30%;height: 5upx;background-color: #3CA4F9;left: 35%;bottom: 0;border-radius: 3upx;}
	
	
	.uChartWrap{
		background: #fff;
		height: 470upx !important;
		padding-top: 20upx ;
		margin: 50upx 30upx 30upx 30upx;
	}
	.uChartWrap> view{padding: 0 20upx;}
	.uChart{
		height: 400upx !important;
	
	}
</style>
